<template>
  <section class="modlude">
    <!-- <el-form :inline="true" :model="formSearch" class="form_inline" label-width="100px">
      <el-form-item label="选择项目" size="small" prop="xqId">
        <el-select v-model="formSearch.xqId" placeholder="请选择项目">
          <el-option v-for="item in xqTree" :label="item.name" :value="item.id" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="getlist">查 询</el-button>
      </el-form-item>
    </el-form> -->
    <el-table :data="formData" style="width: 100%" stripe @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="carparkNo" label="车场标识" align="center"></el-table-column>
      <el-table-column prop="totalSpace" label="总车位数" align="center"></el-table-column>
      <el-table-column prop="tmpCarCount" label="场内临时车数量" align="center"></el-table-column>
      <el-table-column prop="mthCarCount" label="场内月租车数量" align="center"></el-table-column>
      <el-table-column prop="freeSpace" label="空闲车位数" align="center"></el-table-column>
      <el-table-column prop="" label="创建时间" width=150 align="center">
                <template slot-scope="scope" v-if="scope.row.gmtCreate">
                    {{ formatDate(scope.row.gmtCreate) }}
                </template>
      </el-table-column>
    </el-table>
    <!-- <paging @changePage = handleCurrentPage :get-total='total' :moduleInfor="moduleInfor"></paging> -->
  </section>
</template>

<script>
import paging from '../../components/paging.vue';
import {
    getCarSpaceInfo,
    delCar,
    addPropertyTypeList,
    updatePropertyTypeList,
    xqSelectList,
    orgTree,
} from '../../url/api';
export default {
  data(){
    return{
      checkStrictly:false,
      bindRole:{},
      showmenuList:[],
      menuList:[],
      option1:[],
      xqTree:[],
      isAddorUpdate:1,//1添加、2修改
      formSearch:{
        xqId:''
      },
      formData: [],//数据
      deleBatch: [],//删除数据
      formUpdate:{},//修改表单
      total: 0,//数据总数
      pages:0,//页面总数
      addDialog:false,
      updateDialog:false,
      dialog:false,
      replyType:1,//1。单个回复 2.批量回复
      formPush:{
      },
      dataTree:[],
      defaultProps: {//树状图key定义
        children: 'data',
        label: 'name'
      },
      defaultProps2: {
        children: 'children',
        label: 'name',
        value: 'id',
        expandTrigger: 'hover',checkStrictly: true
      },
      reply:'',
      moduleInfor:{},
      rules: {
        name:[{ required: true, message: '该项不能为空'}],
        type:[{ required: true, message: '该项不能为空',trigger: 'blur'}],
        xqId:[{ required: true, message: '该项不能为空',trigger: 'blur'}],
      },
      imageUrl:''
    }
  },
created(){
this.Bus.$on('sendTableDatapk4',(data)=>{
    console.log('~~~~',data);
    this.formSearch = data.formSearch;
    // this.total = data.total
    this.getlist();
  })
},
mounted() {
    this.getInit();
    },
components: {
    paging,
    },
methods:{
    getlist(){
      getCarSpaceInfo(this.formSearch).then((res)=>{
        if(res.data.ok){
          this.formData.push( res.data.data)
        }
      })
    },
        getInit() {
            xqSelectList({}).then((res) => {
                //项目选择列表
                // console.log(res);
                if (res.data.ok) {
                    this.xqTree = res.data.data;
                    this.formSearch.xqId = this.xqTree[0].id;
                    this.getlist();
                }
            });
            let org_tree = {
                name: '',
                status: 1,
            };
            orgTree(org_tree).then((res) => {
                //获取组织列表
                // console.log(res);
                if (res.data.ok) {
                    this.dataTree = res.data.data;
                }
            });
        },
        addList(addList) {
            //添加树状图node节点
            this.$refs[addList].validate((valid) => {
                if (valid) {
                    this.addDialog = false;
                    addPropertyTypeList(this.formPush).then((res) => {
                        // console.log(res);
                        if (res.data.ok) {
                            this.getlist();
                            this.$message({
                                message: '添加成功',
                                type: 'success',
                            });
                        } else {
                            this.$message('添加失败:' + res.data.msg);
                        }
                    });
                    this.addDialog = false;
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
        updateList(formName) {
            //修改
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.formUpdate.gmtCreate) {
                        delete this.formUpdate.gmtCreate;
                    }
                    let params = this.formUpdate;
                    updatePropertyTypeList(params).then((res) => {
                        console.log(res);
                        if (res.data.ok) {
                            this.$message({
                                message: '修改成功',
                                type: 'warning',
                            });
                            this.getlist();
                        }
                    });
                } else {
                    // console.log('error submit!!');
                    return false;
                }
                this.updateDialog = false;
            });
        },
        updateShowBox(item) {
            //修改东西弹窗
            // this.formUpdate = JSON.parse(JSON.stringify(item));
            this.formUpdate = {
                id: item.id,
            };
            this.updateDialog = true;
            console.log(this.formUpdate);
        },
        deleInfor(ids) {
            //删除
            let arrId = [];
            if (ids) {
                arrId.push(ids);
            } else {
                if (this.deleBatch.length != 0) {
                    this.deleBatch.filter((item) => {
                        arrId.push(item.carId);
                        return item;
                    });
                }
            }
            this.$confirm('确认删除吗？')
                .then((_) => {
                    delCar(arrId).then((res) => {
                        console.log(res);
                        if (res.data.ok) {
                            this.$message('删除成功');
                            this.getlist();
                        }
                    });
                })
                .catch((_) => {});
        },

        handleSelectionChange(val, self) {
            //多选
            this.deleBatch = val;
            console.log(this.deleBatch);
        },
        handleCurrentPage(val) {
            //页码改变
            this.formSearch.current = val;
            this.getlist();
        },
        //时间格式拼接
        formatDate(time) {
          if (time.length < 6) {
            time.push(0); // 当时间秒为00时，后端只会返回五个数字，所以往数组末尾添加默认值 0
          }
            const [year, month, day, hour, minute, second] = time;
            const formattedDate = `${year}-${this.padZero(month)}-${this.padZero(day)}`;
            const formattedTime = `${this.padZero(hour)}:${this.padZero(minute)}:${this.padZero(second)}`;
            return `${formattedDate} ${formattedTime}`;
        },
        padZero(num) {
        return num.toString().padStart(2, '0');
        },  }
};
</script>
<style scoped>
.cont_box {
    width: 100%;
    display: flex;
}
.cont_box_left,
.cont_box_right {
    flex: 1;
    background: transparent;
    padding: 10px;
}
.cont_box_left {
    margin-right: 10px;
}
.margin10 {
    margin-bottom: 10px;
}
.marginRight {
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.cont_box_right .el-form-item {
    margin-bottom: 20px;
}
</style>
